import Vue from 'vue'
// import VueRouter from 'vue-router'
import four from './views/404'
// import routes from './routes'

// const Foo = { template: '<div>foo</div>' }
// const Bar = { template: '<div>bar</div>' }

/* 安装vue-router插件 */
// Vue.use(VueRouter); // 注册路由

/* 定义路由页面 */
// const routes = [
//     { path: '/', component: Foo },
//     { path: '/b', component: Bar }
// ];

// mode指定路由模式，默认'hash'，另一种可选的模式是'history'
// const router = new VueRouter({
//     mode: 'history',
//     routes
// });

/* 创建挂载点至#app元素，将内容显示在index.html页面 */
// let app = new Vue({
//     el: '#app',
//     router,
//     render: h => h(four)
// });

// Vue.use({
//     app
// });

const app = new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      const matchingView = routes[this.currentRoute]
      return matchingView
        ? require('./views/' + matchingView + '.vue')
        : require('./views/404.vue')
    }
  },
  routes,
  render (h) {
    return h(this.ViewComponent)
  }
})

window.addEventListener('popstate', () => {
  app.currentRoute = window.location.pathname
})